/** @jsxImportSource @emotion/react */
import * as React from "react";
import {css} from "@emotion/react";
import {
    Button, CheckSwitch,
    CommitInput,
    DdMenu, DdMenuItem,
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogHeading, DialogTrigger, IconArchive,
    IconButton, IconEyeOff, IconMenu,
    IconMoreVertical, IconPlus,
    IconRefButton, IconTrash, IconTrash2,
    IconX,
    Input, InputDatalist,
    InputLine,
    InputPure, Itext,
    ListFlexRow, MenuItem, Pager,
    Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeading, PopoverRefer,
    Select, SuffixInput, Tab, TabPanel, Tabs, Text,
    Touchable,
    useTheme
} from "customize-easy-ui-component";
// import {Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverRefer, PopoverHeading} from "@/comp/Popover";
import {DeviceClassSelect} from "../../device/DeviceClassSelect";
import {SuffixRefInput} from "customize-easy-ui-component/esm/Form";
import {eqpTypeAllMap} from "../../dict/eqpComm";
import {reportStatusMap} from "../../task/DeviceListItem";
import {FeesListItem$key} from "../../task/fee/__generated__/FeesListItem.graphql";
import {useContext} from "react";
import RoutingContext from "../../routing/RoutingContext";
import {IEqpEntity} from "../../comp/ChooseEqps";
import {useMeasure} from "customize-easy-ui-component/esm/Hooks/use-measure";
import {eqpUseStateMap} from "../../pipeline/edit/管道单元";
import {useMediaLayout} from "use-media";
import {useWindowSize} from "customize-easy-ui-component/esm/Hooks/use-window-size";
import {工作级别} from "../../device/edit/起重";
import {进口类型} from "../../device/edit/CommnBase";

interface DeviceMultiSelectProps {
    // param: string;   //参数名
    paramConf: any[];     //来自editParamConfig.ts的当前参数的配置对象数组。
    // dxDevs?: Array<IEqpEntity>;      // any [];
    //编辑模式： 删除某一个设备回调。  React.Dispatch<React.SetStateAction<any []>>;  Array<IEqpEntity>
    // setDxDevs?:  (value: Array<IEqpEntity>) => void;
    //删除这个收费项目
    // onCancel?: () => void;
    //切换数据并显示 管道单元的明细列表。
    // onViewPipeList?: ([]) => void;
    //弹出框跟踪某焦点: 编辑框Input?。
    // refer?: React.ReactNode;
    //加入按钮: 更多设备跳转路由需要保存编辑器现状。
    addBtn?: React.ReactNode;
    intOpen?: boolean;
    //默认可编辑形态：可删除已选择设备。
    edit?: boolean;
    //清除当前的编辑选择，或者说reset恢复编辑之前的数据。
    onReset?: () => void;
    eqsum: number;
    //当前平台这些设备的参数取值{模型全部字段}
    devpis: any[];
    //数据库旧的修改模型取值：针对当前技术参数的:已经保存过的 目标变更取值。多个设备的[]
    modifys: any[];
    oldvals: any[];
    viewOld?: boolean;
}
/**单一个技术参数的变更：但是多个设备或多单元的。
 * devpis[]和变更申请单的设备管道的顺序要一致。
 */
export function useEqpsParamModify({addBtn, intOpen=false, edit=true,onReset,
                  eqsum=1,paramConf,devpis,modifys,oldvals,viewOld=true,
}: DeviceMultiSelectProps) {
    // const param= paramConf[1];
    const [parname,param,__mapZD,edtype,listUnit] = paramConf;
    //param 参数字段名称"svp.门跨度" 特殊： .svp[json?.]; var svpZD = str.startsWith("svp.");
    const svpZD = param.startsWith("svp.");
    const sparzd =svpZD? param.substring(4) : '';
    const theme = useTheme();
    const { history } = useContext(RoutingContext);
    const {innerHeight, innerWidth}= useWindowSize();
    //modifys是前一次保存的取值或者未初始化的。
    const [eqpparvls, setEqpparvls] = React.useState<any[]>(modifys);
    //当前参数 类型值修改,类比fno；  多个设备公用的编辑器。
    const [fno, setFno] = React.useState<any>(edtype===6? '' : undefined);
    React.useEffect(() => {
        setEqpparvls(modifys || []);
    }, [modifys]);
    const handleModify = React.useCallback((i: number,value: any) => {
        let dv_one_parm: any = eqpparvls[i];        //对应某一个设备或管道党员的坑。
        dv_one_parm= value;
        eqpparvls.splice(i, 1, dv_one_parm);  //未初始化啊
        let newarr=[...eqpparvls];     //顺序和个数保持不变！
        setEqpparvls(newarr);
    }, [eqpparvls,setEqpparvls]);

    if(modifys===undefined) return {
        view: null,
        eqpparvls: [],
    }
//多个设备 或 管道单元的，唯一一个参数的变更：
  const view=(
     <div>
         <Text>针对参数 {parname} 配置的如下： </Text>
         <br/>
         {
             //第二列：有两种情况： 1，申请单提交时刻的参数取值 2，该参数在本平台当前最新取值。
             devpis?.map((dev,i) => {
                 return (<Popover key={i}>
                     <PopoverRefer asChild style={{
                         fontSize: 'large',
                         minWidth: '3rem',
                         margin: '3px 5px',
                     }}>
                         <div>
                             <ListFlexRow >
                                 <Text>{(dev.__typename==='PipingUnit'? dev.rno : dev.cod) || '空' }</Text>
                                 { viewOld?
                                     <Itext>{ oldvals[i] || ''}</Itext>
                                     :
                                     <Itext>{ (svpZD? dev.svp[sparzd] : dev[param]) || ''}</Itext>
                                 }
                                 <Itext>{ '>' }</Itext>
                                 <Text>{modifys[i] || ''}</Text>
                             </ListFlexRow>
                         </div>
                     </PopoverRefer>
                     <PopoverContent css={{
                         border: 'none !important',
                         padding: '0 !important',
                     }}
                     >
                         <PopoverDescription
                             style={{
                                 display: "flex",
                                 flexWrap: 'wrap',
                             }}
                             css={{
                                 // width: `calc(100vw - ${theme.iconSizes.md} - 2 * ${theme.spaces.sm})`,
                                 width: '100vw',
                                 maxWidth: innerWidth!>820? '820px' : undefined,
                             }}
                         >
                           <div>
                               { modifys[i]===undefined?
                                   <Text>当前设置意味着想清空该参数</Text> :
                                   <Text>当前: {modifys[i]??''}</Text>
                               }
                               <InputLine label={`${parname}:`}>
                               { edtype===2?
                                       <SuffixInput  onSave={txt=> setFno(txt||undefined)}
                                                     type="number"  value={ fno || ''}>{listUnit}</SuffixInput>
                                   :
                                   edtype===1?
                                       <SuffixInput   onSave={txt=> setFno(txt||undefined)}
                                                      value={ fno || ''}>{listUnit}</SuffixInput>
                                   :
                                   edtype===6?
                                       <InputDatalist  value={ fno || ''} datalist={listUnit}  disabled={fno===undefined}
                                                       onListChange={v => setFno(v ||undefined)} />
                                       :
                                   edtype===5?
                                       <Select  value={ fno || ''}
                                                onChange={e => setFno( e.currentTarget.value||undefined ) } >
                                           <option> </option>
                                           { listUnit.map((one: string, i: number) => (
                                               <option key={i} value={one}>{one}</option>
                                           )) }
                                       </Select>
                                       :
                                       edtype===3?
                                           <CheckSwitch  checked= {fno || false}
                                                         onChange={e => setFno(fno? undefined:true) }
                                           />
                                           :
                                           edtype===4?
                                               <Input type='date'  value={ fno  || ''}
                                                      onChange={e => setFno( e.currentTarget.value||undefined ) } />
                                   :
                                   <CommitInput  value={ fno || ''}
                                                 onSave={txt => setFno(txt||undefined) } />
                               }
                               </InputLine>
                           </div>
                         </PopoverDescription>

                         <div style={{
                             display: "flex",
                             width: '100%',
                             justifyContent: 'space-around',
                             minWidth: '16rem',
                         }}>
                             <PopoverClose style={{
                                 margin: 'unset',      //底层ForwardRef组件用{...props}接收并替换掉style={}可以成功覆盖
                             }}>
                                 <IconX/>
                             </PopoverClose>
                             <PopoverClose style={{
                                 margin: 'unset',
                             }}>
                                 <IconButton  variant="ghost"  icon={<IconArchive />}  label="变更值设定"
                                              onClick={async (e) => {
                                                  handleModify(i,fno);
                                              } }
                                 />
                             </PopoverClose>
                             <IconButton
                                 variant="ghost"
                                 icon={fno===undefined? <IconTrash2 /> : <IconTrash />}
                                 label="删除"
                                 onClick={async (e) => {
                                     //针对<InputDatalist问题,碰巧可以的直接依照fno判别是否清空null字段,顺带逻辑屏蔽：disabled={fno===undefined}
                                     if(fno===undefined)   setFno('');
                                     else  setFno(undefined);
                                     e.preventDefault();
                                     e.stopPropagation();
                                 } }
                             />
                             <PopoverClose style={{
                                 margin: 'unset',
                             }}>
                                 <IconButton
                                     variant="ghost"
                                     icon={<IconTrash />}
                                     label="该参数不修改"
                                     onClick={async (e) => {
                                         eqpparvls.splice(i, 1, oldvals[i]);    //不能用undefined来取代，前后端数据库jsonb{}都无法支持，JSON.parse也不能支持。
                                         let newarr=[...eqpparvls];     //顺序和个数保持不变！
                                         setEqpparvls(newarr);
                                     } }
                                 />
                             </PopoverClose>
                         </div>
                     </PopoverContent>
                 </Popover>);
                 }  )
         }
     </div>
  );

  //页面复用的Hook：返回eqpparvls是该参数目标变更取值[]每一个设备管道都有的。数组顺序和变更申请单的设备管道的顺序要一致。
  return {
     view,
     // open,
     // setOpen,
     eqpparvls
  };
}


/*
【问题】上面的onClick={async (e) => { let dv_one_parm: any = eqpparvls[i];有问题，点击不能够获取最新的eqpparvls变量值。

* */